<template>
  <div>
    <!-- <map-d /> -->
    <a-row :gutter="20">
      <a-col v-for="(item,index) in list" :key="index" :span="12">
        <ant-card class="Card">
          <template #content>
            <div class="topTitle">{{item.title}}</div>
            <pie :props="item" />
          </template>
        </ant-card>
      </a-col>
    </a-row>
    <ant-card class="Card" v-for="(item,index) in BarGraph" :key="index">
      <template #content>
        <div class="topTitle">{{item.title}}</div>
        <columnar :props="item" :alias="alias" />
      </template>
    </ant-card>
  </div>
</template>
<script lang="ts">
const MapD = () =>
  import("../../components/Chart/Province/Province.vue").then(
    m => m.default || m
  );
import { Component, Vue } from "vue-property-decorator";
const Columnar = () =>
  import("../../components/Chart/Columnar/Columnar.vue").then(
    m => m.default || m
  );
const Pie = () =>
  import("../../components/Chart/Pie/Pie.vue").then(m => m.default || m);
const AntCard = () =>
  import("../../components/Card.vue").then(m => m.default || m);
import { Columnar as StudentChange } from "../../models/Chat/Columnar";
import { Basis } from "../../models/Chat/Pie";
@Component({
  layout: "menu",
  name: "Teacher-Home",
  components: {
    MapD,
    Columnar,
    Pie,
    AntCard
  }
})
export default class TeacherHome extends Vue {
  alias: string = "教师人数";
  columnar: StudentChange = {
    title: "各学科教师人数",
    Height: 400,
    sourceData: [
      {
        year: "语文",
        sales: 100,
        type: "人数"
      },
      {
        year: "数学",
        sales: 200,
        type: "人数"
      },
      {
        year: "蒙语",
        sales: 300,
        type: "人数"
      }
    ]
  };
  columnar1: StudentChange = {
    title: "人数统计",
    Height: 400,
    sourceData: [
      {
        year: "全部职工总数",
        sales: 100,
        type: "人数"
      },
      {
        year: "在职教师",
        sales: 200,
        type: "人数"
      },
      {
        year: "退休教师",
        sales: 300,
        type: "人数"
      },
      {
        year: "其他人员",
        sales: 400,
        type: "人数"
      }
    ]
  };
  BarGraph: any[] = [];
  pie: Basis = {
    Height: 400,
    title: "在职教师总数，男女数量比例",
    sourceData: [
      {
        item: "男",
        count: 100
      },
      {
        item: "女",
        count: 200
      }
    ]
  };
  pieOne: Basis = {
    Height: 400,
    title: "民族数量比例（汉、蒙、其他）",
    sourceData: [
      {
        item: "汉",
        count: 100
      },
      {
        item: "蒙",
        count: 200
      },
      {
        item: "其他",
        count: 200
      }
    ]
  };
  pieTwo: Basis = {
    Height: 400,
    title: "学历数量比例",
    sourceData: [
      {
        item: "博士",
        count: 100
      },
      {
        item: "本科",
        count: 200
      },
      {
        item: "硕士",
        count: 100
      }
    ]
  };
  pieFree: Basis = {
    Height: 400,
    title: "年龄数量比例",
    sourceData: [
      {
        item: "12",
        count: 100
      },
      {
        item: "13",
        count: 200
      }
    ]
  };
  pieFive: Basis = {
    Height: 400,
    title: "年龄数量比例",
    sourceData: [
      {
        item: "30",
        count: 100
      },
      {
        item: "50",
        count: 200
      }
    ]
  };
  pieSix: Basis = {
    Height: 400,
    title: "职称数量比例",
    sourceData: [
      {
        item: "初级",
        count: 100
      },
      {
        item: "中级",
        count: 200
      },
      {
        item: "副高级",
        count: 300
      },
      {
        item: "正高级",
        count: 400
      }
    ]
  };
  list: any[] = [];
  created() {
    this.list.push(this.pie);
    this.list.push(this.pieOne);
    this.list.push(this.pieTwo);
    this.list.push(this.pieFree);
    this.list.push(this.pieFive);
    this.list.push(this.pieSix);

    this.BarGraph.push(this.columnar);
    this.BarGraph.push(this.columnar1);
  }
}
</script>
<style lang="less" scoped>
.container {
  width: 500px;
  height: 500px;
}
.topTitle {
  text-align: center;
  font-size: 30px;
  margin-bottom: 15px;
  margin-top: 15px;
}
.Card {
  margin-bottom: 10px;
}
</style>